<template>
  <div
    class="text-bold text-center row text-red items-center q-gutter-sm"
    :class="needDialog ? 'cursor-pointer' : ''"
    @click="showDialog()"
  >
    <div>主电池电量过低</div>
    <q-spinner-cube
      color="red"
      size="2rem"
    />
  </div>
  <prompt-dialog ref="dialog" :message="message"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import PromptDialog from "components/status/dialog/PromptDialog.vue";

const props = defineProps({
  needDialog: {type: Boolean, default: false}, // 是否需要弹窗
  message: {type: String, default: ''}
});

const lang = "indexPage.deviceError.";
const dialog = ref();

onMounted(() => {
  dialog.value.visible = props.needDialog;
});

function showDialog() {
  dialog.value.visible = props.needDialog;
}
</script>

<style scoped></style>
